<template>
  <div class="inventorybox">
    <!-- 工具栏区域 -->
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">
        产品名称：<el-input
          v-model="searchText"
          placeholder="查询获取库存信息表数据"
          class="searchInput"
        ></el-input>
        <span class="searchBtn">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </span>
      </div>
      <!-- 左侧按钮 -->
      <div slot="bottom">
        <el-button type="primary" plain @click="add">新增库存</el-button>
        <el-button type="danger" plain>批量删除</el-button>
      </div>
    </table-bar>
    <el-table
      :data="inventoryData"
      style="width: 100%"
      class="table"
      :cell-style="{ padding: '14px 0px' }"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="typeId"
        label="产品编号"
        v-if="columns[0].show"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="typeName"
        label="产品名称"
        v-if="columns[1].show"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="price"
        label="单价（元）"
        v-if="columns[2].show"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="count"
        label="库存（个）"
        v-if="columns[3].show"
        width="200"
      ></el-table-column>
      <el-table-column label="操作" v-if="columns[4].show">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-share"
            @click="checkDetail(scope.row.id)"
            >详情</el-button
          >
          <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: #FA6962"
            @click="deleteById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 添加对话框 -->
    <StorageInpopup
      :addForm="addForm"
      :title="'新增订单'"
      :dialogVisible="addDialogVisible"
      @closeAddDialog="closeAddDialog"
      @closeAddDialogB="closeAddDialogB"
      v-show="addDialogVisible"
      @addDisplayData="addDisplayData"
    />
    
    <!-- 详情对话框 -->
    <StorageDetailDialog
      :detailForm="detailForm"
      :title="'详情'"
      :dialogVisible="detailDialogVisible"
      @closeDetailDialog="closeDetailDialog"
      @closeDetailDialogB="closeDetailDialogB"
      v-show="detailDialogVisible"
      @detailDisplayData="detailDisplayData"
    />

    <!-- 修改对话框 -->
    <StorageEditDialog
      :editForm="editForm"
      :title="'修改订单'"
      :dialogVisible="editDialogVisible"
      @closeEditDialog="closeEditDialog"
      @closeEditDialogB="closeEditDialogB"
      v-show="editDialogVisible"
      @editDisplayData="editDisplayData"
    />
  </div>
</template>

<script>
import StorageInpopup from "@/components/Process/storageInpopup.vue";
import StorageEditDialog from "@/components/Process/storageEditDialog.vue";
import StorageDetailDialog from "@/components/Process/storageDetail.vue";
import {
  getProcessByPage,
  getProcessById,
  delInfoById,
} from "@/api/Process/processManage";

export default {
  name: "StorageManage",
  meta: {
    title: "库存管理",
  },
  components: {
    StorageInpopup,
    StorageEditDialog,
    StorageDetailDialog
  },
  data() {
    return {
      columns: [
        { name: "产品编号", show: true },
        { name: "产品名称", show: true },
        { name: "单价（元）", show: true },
        { name: "库存（个）", show: true },
        { name: "操作", show: true },
      ],
      inventoryData: [],
      pageInfo: {
        pageSize: 5,
        currentPage: 1,
      },
      total: 1,
      addDialogVisible: false,
      editDialogVisible: false,
      detailDialogVisible: false,
      searchText: "",
      tempId: 0,
      addForm: {},
      editForm: {},
      detailForm: {}
    };
  },
  created() {
    this.getProcessByPage();
  },
  computed: {
    select_processingId() {
      return this.$store.state.Usersetting.ProcessInfo.processingId;
    },
  },

  methods: {
    async getProcessByPage() {
      const { data: res } = await getProcessByPage(
        this.pageInfo.currentPage,
        this.pageInfo.pageSize,
        this.select_processingId
      );
      if (res.statusCode !== 20000) {
        console.log(res);
        return this.$message.error(res.message);
      }
      console.log(res, 555);
      this.inventoryData = res.data.records;
      this.total = res.data.total;
      this.pageInfo.pageSize = res.data.size;
      this.pageInfo.currentPage = res.data.current;
    },
    // columns改变
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.flowListRef.doLayout();
    },
    // 页面列表数改变
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.getProcessByPage();
    },
    // 页数改变
    handleCurrentChange(newPage) {
      this.pageInfo.currentPage = newPage;
      this.getProcessByPage();
    },
    //打开新增表单
    add() {
      this.addDialogVisible = true;
      this.title = "新增订单";
      this.addForm = {
        count: 0,
        preprice: 0,
        price: 0,
        processingId: this.select_processingId,
        referPrice: 0,
        remark: '',
        specification: '',
        total: 0,
        typeId: 0,
        typeName: ''
      };
    },
    //关闭新增表单
    closeAddDialog(a) {
      //是否打开详情表单
      // this.detailDialog = a;
      //是否新增打开表单
      this.addDialogVisible = a;
      this.addForm = {
        count: 0,
        preprice: 0,
        price: 0,
        processingId: this.select_processingId,
        referPrice: 0,
        remark: '',
        specification: '',
        total: 0,
        typeId: 0,
        typeName: ''
      };
      this.getProcessByPage();
    },
    //是否新增打开表单
    closeAddDialogB(a) {
      this.addDialogVisible = a;
      this.addForm = {
        count: 0,
        preprice: 0,
        price: 0,
        processingId: this.select_processingId,
        referPrice: 0,
        remark: '',
        specification: '',
        total: 0,
        typeId: 0,
        typeName: ''
      };
      this.getProcessByPage();
    },
    addDisplayData() {
      this.getProcessByPage();
    },
    //打开修改表单
    async edit(info) {
      this.editDialogVisible = true;
      this.title = "修改订单";
      this.editForm = {
        count: info.count,
        preprice: info.preprice,
        price: info.price,
        processingId: this.select_processingId,
        referPrice: info.referPrice,
        remark: info.remark,
        specification: info.specification,
        total: info.total,
        typeId: info.typeId,
        typeName: info.typeName
      };
    },
    //关闭修改表单
    closeEditDialog(a) {
      this.editDialogVisible = a;
      this.editForm = {
        count: 0,
        preprice: 0,
        price: 0,
        processingId: this.select_processingId,
        referPrice: 0,
        remark: '',
        specification: '',
        total: 0,
        typeId: 0,
        typeName: ''
      };
      this.getProcessByPage();
    },
    //是否新增打开表单
    closeEditDialogB(a) {
      this.editDialogVisible = a;
      this.editForm = {
        count: 0,
        preprice: 0,
        price: 0,
        processingId: this.select_processingId,
        referPrice: 0,
        remark: '',
        specification: '',
        total: 0,
        typeId: 0,
        typeName: ''
      };
      this.getProcessByPage();
    },
    editDisplayData() {
      this.getProcessByPage();
    },
    // 打开详情框
    async checkDetail(id) {
      this.detailDialogVisible = true;
      this.title = "详情";
      const { data: res } = await getProcessById(id);
      console.log(res, 'hhhh');
      this.detailForm = res.data;
    },
    //关闭详情表单
    closeDetailDialog(a) {
      this.detailDialogVisible = a;
      this.getProcessByPage();
    },
    //是否新增打开表单
    closeDetailDialogB(a) {
      this.detailDialogVisible = a;
      this.getProcessByPage();
    },
    detailDisplayData() {
      this.getProcessByPage();
    },
    // 删除
    async deleteById(id) {
      this.$confirm(
        "是否永久删除该产品的库存信息（此操作不可撤销）？",
        "删除",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消",
        }
      )
        .then(async () => {
          const { data: res } = await delInfoById(id);
          if (res.statusCode !== 20000) {
            console.log(res);
            return this.$message.error(res.message);
          }
          this.$message.warning(res.message);
          let total = this.total;
          let size = this.pageInfo.pageSize;
          this.getProcessByPage();
          if (this.pageInfo.currentPage !== 1 && total % size === 1) {
            this.pageInfo.currentPage--;
            this.getProcessByPage();
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .inventorybox {
  padding: 15px;
}

.searchInput {
  margin: 0px 0 18px 6px;
  width: 276px;
}

.searchBtn {
  float: right;
}

// /deep/ thead {
//     text-align: center;
//     line-height: 29px;
//     color: rgb(102, 102, 102);
// }

.table {
  padding-top: 14px;
  font-size: 14px;
  text-align: center !important;
  color: rgb(102, 102, 102);
}

/deep/ .el-table th {
  z-index: 99;
  text-align: center;
  line-height: 29px;
  color: rgb(102, 102, 102);
  background-color: rgb(248, 248, 248);
}

/deep/ .el-table td {
  z-index: 99;
  text-align: center;
}

/deep/ .el-pagination {
  padding: 15px 5px;
}

.formClass {
  text-align: left;
}
</style>